<script setup>
import { onMounted, ref } from 'vue'
import { useUserStore } from '@/stores/userStore'
import { useshopProduct } from '@/stores/shopProduct'
import { useRoute, useRouter } from 'vue-router'
const shopProduct = useshopProduct()
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const comfirm = () => {
	let sendForm = form.value.map((item, index) => {
		let { level, content } = item
		let { orderId, orderItems, shopId } = orderData.value
		if (content == '') {
			ElMessage({
				type: 'success',
				message: '还有商品未进行评价'
			})
			return
		}
		return {
			content: content,
			createByUserId: 0,
			createByUserName: '',
			createTime: '',
			endAt: '',
			isDel: 0,
			level: level * 2,
			orderId: orderId,
			orderItemId: item.orderItemId,
			picJson: JSON.stringify(avatarUrl.value[index]),
			shopId: shopId,
			snowId: 0,
			spuEvaluationId: 0,
			spuId: item.spuId,
			startAt: '',
			updateByUserId: 0,
			updateByUserName: '',
			updateTime: '',
			userId: userStore.userInfo.userId
		}
	})
	let res = sendForm.map((item, index) => {
		return shopProduct.userEvaluation(item)
	})
	// console.log(res);
}
let form = ref([])
let orderData = ref({})
const avatarUrl = ref([])
// 上传文件接口地址
const action = import.meta.env.VITE_PC_BASE_PATH + '/gscloud_biz/oss/upload_minio'
// 上传文件格式限制
const accept = ref('.png, .jpg, .webp')
const fileType = ref(['png', 'jpg', 'webp'])
// 上传成功
const handleSuccess = (res, file, fileList) => {
	ElMessage({
		type: 'success',
		message: '上传成功'
	})
	avatarUrl.value[changeUploadFlag.value].push(import.meta.env.VITE_PC_UPLOAD_PATH + res.data.dir + res.data.fileName)
	// console.log(avatarUrl.value)
	// console.log(changeUploadFlag.value)
}

// 上传前校检格式和大小
const beforeUpload = (file) => {
	let isAccept = false
	if (fileType.value.length) {
		let fileExtension = ''
		if (file.name.lastIndexOf('.') > -1) {
			fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
		}

		isAccept = fileType.value.some((type) => {
			if (file.type.indexOf(type) > -1) {
				return true
			}
			if (fileExtension && fileExtension.indexOf(type) > -1) {
				return true
			}
			return false
		})
	} else {
		isAccept = file.type.indexOf('image') > -1
	}
	if (!isAccept) {
		ElMessage({
			type: 'erroe',
			message: `文件格式不正确, 请上传${fileType.value.join('/')}图片格式文件!`
		})
		return false
	}
}
//选择不同的图片上传板块
let changeUploadFlag = ref(0)
const changeUpload = (index) => {
	changeUploadFlag.value = index
}
onMounted(() => {
	// console.log(JSON.parse(route.query.item))
	orderData.value = JSON.parse(route.query.item)
	let { orderItems } = orderData.value
	orderItems.forEach((item, index) => {
		form.value.push({
			level: 5,
			...item
		})
		avatarUrl.value.push([])
	})
	// console.log(form.value)
})
</script>

<template>
	<div class="evaluation-container">
		<div class="box evaluation-mainBox">
			<template v-for="(item, index) in orderData.orderItems" :key="index">
				<div class="evaluation-spuInfo">
					<div class="spuInfo-img">
						<img :src="item.pic" alt="" />
					</div>
					<div class="spuInfo-mainInfo">
						<div class="mainInfo-spuName">
							{{ item.spuName }}
						</div>
						<div class="maininfo-skuInfo">
							{{ item.skuName }}
						</div>
					</div>
				</div>
				<div class="evaluation-level">
					<div class="title">商品得分:</div>
					<div class="spuInfo-level">
						<el-rate v-model="form[index].level" allow-half void-icon="StarFilled" />
					</div>
				</div>
				<div class="evaluation-mainInputBox">
					<div class="title">商品评价:</div>
					<div class="evaluation-mainInput">
						<textarea class="mainInput" placeholder="请填写商品评价内容..." v-model="form[index].content"></textarea>
					</div>
					·
				</div>
				<div class="evaluation-uploadImgBox">
					<div class="title">上传图片:</div>
					<img :src="item" v-for="(item, index) in avatarUrl[index]" />
					<div class="evaluation-uploadImg">
						<el-upload
							class="upload"
							:limit="4"
							:accept="accept"
							:action="action"
							:on-success="handleSuccess"
							:show-file-list="false"
							:before-upload="beforeUpload"
							@click="changeUpload(index)"
						>
							<div class="upload-btn">添加图片+</div>
						</el-upload>
					</div>
				</div>
			</template>
			<div class="evaluation-configButton">
				<div class="config-cancelButton configButton">取消</div>
				<div
					class="config-confirmButton configButton"
					@click="
						() => {
							comfirm()
						}
					"
				>
					提交
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.evaluation-container {
	background-color: #f4f4f4;
	padding: 30px 160px;
	min-height: calc(100vh - 220px);
	.box {
		padding: 67px 67px 75px;
		background-color: #fff;
		.evaluation-uploadImgBox {
			display: flex;
			margin-bottom: 67px;
			padding-left: 56px;
			margin-top: 40px;
			align-items: center;
			.title {
				font-family: Lexend, Lexend;
				font-weight: bold;
				font-size: 19px;
				color: #333333;
				margin-right: 27px;
				display: flex;
				align-items: center;
			}
			.evaluation-uploadImg {
				.upload-btn {
					color: #333333;
					padding: 15px 45px;
					border: 1px solid #c1c1c1;
					border-radius: 4px;
				}
			}
			img {
				width: 200px;
				height: 200px;
				margin-right: 20px;
				border-radius: 5px;
				overflow: hidden;
			}
		}
		.evaluation-spuInfo {
			display: flex;
			margin-bottom: 20px;
			.spuInfo-img {
				width: 149px;
				height: 149px;
				margin-right: 27px;
				background-color: #f4f4f4;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.spuInfo-mainInfo {
				flex: 1;

				.mainInfo-spuName {
					font-family: Inter, Inter;
					font-size: 32px;
					color: #333333;
					margin: 24px 0 27px;
				}
				.maininfo-skuInfo {
					display: inline-block;
					padding: 0 13px;
					height: 37px;
					line-height: 37px;
					font-family: Lexend, Lexend;
					font-weight: 400;
					font-size: 19px;
					color: #333333;
					background-color: rgba(244, 244, 244, 1);
				}
			}
		}
		.evaluation-level {
			width: 100%;
			padding-left: 56px;
			margin-top: 67px;
			display: flex;
			.title {
				font-family: Lexend, Lexend;
				font-weight: bold;
				font-size: 19px;
				color: #333333;
				margin-right: 27px;
				display: flex;
				align-items: center;
			}
			.spuInfo-level {
				display: flex;
				:deep(.el-rate__icon) {
					font-size: 35px;
				}
			}
		}
		.evaluation-mainInputBox {
			width: 100%;
			padding-left: 56px;
			margin-top: 68px;
			display: flex;
			.title {
				font-family: Lexend, Lexend;
				font-weight: bold;
				font-size: 19px;
				color: #333333;
				line-height: 28px;
				margin-right: 27px;
			}
			.evaluation-mainInput {
				width: 677px;
				height: 152px;
				background: #ffffff;
				border-radius: 0px 0px 0px 0px;
				border: 1px solid #c1c1c1;
				padding: 15px 13px;
				.mainInput {
					width: 100%;
					height: 100%;
					resize: none;
					border: none;
					outline: none;
					font-family: Lexend, Lexend;
					font-weight: 400;
					font-size: 19px;
				}
			}
		}
		.evaluation-configButton {
			width: 100%;
			height: 53px;
			display: flex;
			padding-left: 56px;
			margin-top: 100px;
			.configButton {
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: Lexend, Lexend;
				font-weight: 400;
				font-size: 19px;
				cursor: pointer;
			}
			.config-cancelButton {
				width: 117px;
				height: 53px;
				background: #ffffff;
				border-radius: 0px 0px 0px 0px;
				border: 1px solid #c1c1c1;
				margin-right: 13px;
				color: #333333;
			}
			.config-confirmButton {
				width: 117px;
				height: 53px;
				background: #c30d23;
				border-radius: 0px 0px 0px 0px;
				color: rgba(255, 255, 255, 1);
			}
		}
	}
}
</style>